"use client";

import { Box } from "@chakra-ui/react";
import { MacroRepeatIcon } from "../Icons/MacroRepeatIcon";
import { MacroPressIcon } from "../Icons/MacroPressIcon";
import { MacroOtherIcon } from "../Icons/MacroOtherIcon";
import { MacroReleaseIcon } from "../Icons/MacroReleaseIcon";
import { useTranslation } from "@/src/i18n";
import React, { useContext } from "react";
import { MainContext } from "@/src/providers/MainProvider";

function SelectMacroType({ onChange }: { onChange: (type: number) => void }) {
  const { hasMacroType4 } = useContext(MainContext);
  const { t } = useTranslation("");
  return (
    <div className="flex flex-col justify-center items-center h-full gap-6">
      <Box className="text-2xl font-bold">{t("selectMacroType")}</Box>
      <Box className="flex justify-between gap-[55px]">
        <Box className="flex flex-col items-center">
          <Box
            className="p-[42px] rounded-[12px] border-2 border-line-2 bg-[#211a31] cursor-pointer hover:border-blue-1 hover:border-2 hover:bg-[rgba(55,65,81,.7)] [&_svg]:hover:fill-transparent [&_svg]:hover:text-blue-1 [&_svg]:hover:stroke-blue-1"
            onClick={() => onChange(2)}
          >
            <MacroReleaseIcon className="w-8 h-8" />
          </Box>
          <Box className="text-[#dddddd] text-[14px] font-bold mt-4">
            {t("cycleWhileHolding")}
          </Box>
          <Box
            className="text-[#eeeeee]  text-[13px]"
            textAlign="center"
            width="234px"
          >
            {t("cycleWhileHoldingTip")}
          </Box>
        </Box>
        {hasMacroType4 && (
          <Box className="flex flex-col items-center">
            <Box
              className="p-[42px] rounded-[12px] border border-line-2 bg-[#211a31] cursor-pointer hover:border-blue-1 hover:border-2 hover:bg-[rgba(55,65,81,.7)] [&_svg]:hover:fill-transparent [&_svg]:hover:text-blue-1 [&_svg]:hover:stroke-blue-1"
              onClick={() => onChange(4)}
            >
              <MacroPressIcon className="w-8 h-8" />
            </Box>
            <Box className="text-[#dddddd] text-[14px] font-bold mt-4">
              {t("loopSameKeysPressed")}
            </Box>
            <Box className="text-[#eeeeee] text-[13px]">
              {t("loopSameKeysPressedTip")}
            </Box>
          </Box>
        )}
        <Box className="flex flex-col items-center">
          <Box
            className="p-[42px] rounded-[12px] border border-line-2 bg-[#211a31] cursor-pointer hover:border-blue-1 hover:border-2 hover:bg-[rgba(55,65,81,.7)] [&_svg]:hover:fill-transparent [&_svg]:hover:text-blue-1 [&_svg]:hover:stroke-blue-1"
            onClick={() => onChange(3)}
          >
            <MacroOtherIcon className="w-8 h-8" />
          </Box>
          <Box className="text-[#dddddd] text-[14px] font-bold mt-4">
            {t("loopOtherKeysPressed")}
          </Box>
          <Box className="text-[#eeeeee] text-[13px]">
            {t("loopOtherKeysPressedTip")}
          </Box>
        </Box>
        <Box className="flex flex-col items-center">
          <Box
            className="p-[42px] rounded-[12px] border border-line-2 bg-[#211a31] cursor-pointer hover:border-blue-1 hover:border-2  hover:bg-[rgba(55,65,81,.7)] [&_svg]:hover:fill-transparent [&_svg]:hover:text-blue-1 [&_svg]:hover:stroke-blue-1"
            onClick={() => onChange(0)}
          >
            <MacroRepeatIcon className="w-8 h-8" />
          </Box>
          <Box className="text-[#dddddd] text-[14px] font-bold mt-4">
            {t("cyclicRepetition")}
          </Box>
          <Box
            className="text-[#eeeeee]  text-[13px]"
            textAlign="center"
            width="234px"
          >
            {t("onceMacro")}
          </Box>
        </Box>
      </Box>
    </div>
  );
}

export default SelectMacroType;
